<template>
  <scroll-view
    class="left-menu"
    scroll-y
    :style="{ height: scrollHeight + 'px' }"
    :scroll-into-view="scrollIntoView"
    scroll-with-animation
  >
    <view class="menu-wrapper">
      <view
        :id="`menu-item-${index}`"
        class="menu-item"
        :class="{ active: index == currentMenuIndex }"
        v-for="(item, index) in menus"
        :key="index"
        @tap="changeMenu(index)"
      >
        <text>{{ item.categoryNameSale }}</text>
        <view
          v-if="item.cornerTag"
          class="corner-tag"
          :style="[cornerTagStyle(item.cornerTag)]"
        >
          {{ item.cornerTag.content }}
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script>
import { mapState, mapActions } from "vuex"
export default {
  name: "LeftMenu",
  props: {
    scrollHeight: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      scrollViewHeight: 0,
      scrollIntoView: ""
    }
  },
  watch: {
    currentMenuIndex(newVal) {
      this.scrollIntoView = `menu-item-${newVal}`
    }
  },
  computed: {
    ...mapState("menu", ["menus", "currentMenuIndex"]),
    cornerTagStyle() {
      return tag => ({
        backgroundColor: tag.bgColor,
        color: tag.fontColor
      })
    }
  },
  methods: {
    ...mapActions("menu", ["setCurrentMenuIndex"]),
    changeMenu(index) {
      this.setCurrentMenuIndex(index)
      this.$emit("change", index)
    }
  }
}
</script>
<style lang="scss" scoped>
.left-menu {
  flex-shrink: 0;
  width: 160rpx;
  background-color: #f3f3f7;
}

.menu-wrapper {
  display: flex;
  flex-direction: column;
  padding-bottom: 100rpx;
}

.menu-item {
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-secondary;
  position: relative;

  &.active {
    font-weight: 600;
    color: $uni-text-color;
    background-color: #fff;

    &::before {
      content: "";
      position: absolute;
      top: calc(50% - 30rpx);
      left: 0;
      width: 4rpx;
      height: 60%;
      background-color: $uni-color-primary;
    }
  }

  .corner-tag {
    position: absolute;
    top: 4rpx;
    right: 8rpx;
    background-color: $uni-color-primary;
    border-radius: $uni-border-radius-base $uni-border-radius-base
      $uni-border-radius-base 0;
    font-size: $uni-font-size-xs;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $uni-spacing-row-xs;
  }
}
</style>
